<template>
  <div class="map-container">
    <div id="cesiumContainer" class="mars3d-map"></div>
  </div>
</template>

<script>
export default {
  name: "Mars3d",
  data(){
    return{
      viewer: null
    }
  },
  mounted(){
    this.initMap();
  },
  methods:{
    initMap(){
      mars3d.createMap({
        id: 'cesiumContainer',
        url: '../config/config2.0.json',
        center: { "y": 30.840932, "x": 116.241494, "z": 3220.57, "heading": 2.9, "pitch": -24.6, "roll": 360 },
        success: (_viewer, jsondata) => {//地图成功加载完成后执行
          this.viewer = _viewer;
          this.initWork();
        }
      });
    },
    initWork() {

      //创建gltf模型，gltfLayer.model为对应的entity
      var gltfLayer = new mars3d.layer.GltfLayer({
        name: '飞机',
        url: serverURL_gltf + '/mars/feiji.glb',
        position: { x: 116.239918, y: 30.879709, z: 1206.1 },
        style: { scale: 2  }, //style同标绘的model类型
        visible: true
      }, this.viewer)


      mars3d.model.rotate.start(gltfLayer.model, { viewer: this.viewer })


    }
  }
}
</script>

<style  lang="scss" scoped>
.map-container{
  height: 100%;
  position: relative;
  .mars3d-map{
    height: 100%;
  }
}
</style>
